<template>
	<view class="con">
		<u-navbar title="任务详情" :title-size="36" :title-width="500" title-color="#fff" back-icon-name="arrow-leftward"
			back-icon-color="#fff" :background="background" :custom-back="goBack">
		</u-navbar>
		<view class="content">
			<div class="title">基本信息</div>
			<!-- 积水险情 -->
			<div class="baseInfo" v-if="type==1">
				<ul>
					<li><label>任务类型：</label><span>{{taskDetail.typeLable}}</span></li>
					<li><label>任务地点：</label><span>{{taskDetail.address}}</span></li>
					<li><label>发生时间：</label><span>{{ taskDetail.happenTime }}</span></li>
					<li><label>积水影响：</label><span>{{taskDetail.impactLable}}</span></li>
					<li><label>积水深度：</label><span>{{taskDetail.depthLable}}</span></li>
					<li><label>积水面积：</label><span>{{taskDetail.areaLable}}</span></li>
					<li><label>备注说明：</label><span>{{taskDetail.description}}</span></li>
				</ul>
			</div>
			<!-- 工程险情 -->
			 <div class="baseInfo" v-if="type==2">
				 <ul>
				 	<li><label>任务类型：</label><span>{{taskDetail.typeLable}}</span></li>
				 	<li><label>任务地点：</label><span>{{taskDetail.address}}</span></li>
				 	<li><label>发生时间：</label><span>{{ taskDetail.happenTime }}</span></li>
				 	<li><label>工程险情：</label><span>{{taskDetail.dangerTypeLable}}</span></li>
				 	<li><label>影响面积：</label><span>{{taskDetail.dangerAreaLable}}</span></li>
				 	<li><label>影响人口：</label><span>{{taskDetail.affectPopulation}}</span></li>
				 	<li><label>备注说明：</label><span>{{taskDetail.description}}</span></li>
				 </ul>
			    </div>
			
			    <!--人员转移详情-->
			    <div class="baseInfo" v-if="type==3">
					<ul>
						<li><label>任务类型：</label><span>{{taskDetail.typeLable}}</span></li>
						<li><label>任务地点：</label><span>{{taskDetail.address}}</span></li>
						<li><label>任务描述：</label><span>{{ taskDetail.description }}</span></li>
						<!-- <li><label>安置点：</label><span>{{taskDetail.dangerTypeLable}}</span></li> -->
					</ul>
			    </div>
			
			    <!--物资调度详情-->
			    <div class="baseInfo" v-if="type==4">
					<ul>
						<li><label>任务类型：</label><span>{{taskDetail.typeLable}}</span></li>
						<li><label>物资仓库：</label><span>{{taskDetail.materialStoreName}}</span></li>
						<li><label>仓库物资：</label><span>
			            <span v-for="item in taskDetail.materials">{{item.materialName}} : {{ item.materialNumber }}</span>
			        </span></li>
						<li><label>任务描述：</label><span>{{ taskDetail.description }}</span></li>
					</ul>
			    </div>
			
			    <!--力量调度详情-->
			    <div class="baseInfo" v-if="type==5">
					<ul>
						<li><label>任务类型：</label><span>{{taskDetail.typeLable}}</span></li>
						<li><label>防汛队伍：</label><span>{{taskDetail.floodTeamName}}</span></li>
						<li><label>调度数量：</label><span>{{taskDetail.dispatchNum}}</span></li>
						<li><label>任务描述：</label><span>{{ taskDetail.description }}</span></li>
					</ul>
			    </div>
			 <div class="imgList" v-if="type==1 || type==2">
			      <span class="name">现场照片：</span>
			      <div class="name" id="imgeVideosContainer">
					 <!-- <img src="https://img0.baidu.com/it/u=3153405721,1524067674&fm=26&fmt=auto&gp=0.jpg" />
					  <img src="https://img0.baidu.com/it/u=3153405721,1524067674&fm=26&fmt=auto&gp=0.jpg" /> -->
				  </div>
			    </div>
			<div class="title">详细流程</div>
			<scroll-view scroll-y="true" style="height: 550rpx;">
				<uni-steps :options="taskHandleRecords" active-color="#007AFF" direction="column" />
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		myMixin
	} from '../../../mixins/mixin.js'
	import taskUtils from '../../../assets/js/taskUtils.js'
	export default {
		name: 'monitorCurve',
		mixins: [myMixin],
		onLoad: function(option) { //option为object类型，会序列化上个页面传递的参数
			this.id = option.id
			this.type = option.type
		},
		data() {
			return {
				background: {
					backgroundColor: '#277fe6',
				},
				type: 1,
				id: '',
				taskDetail: [],
				taskHandleRecords: [],
				numList: [{
					title: '买家下单',
					desc: '2018-11-11'
				}, {
					title: '买家下单',
					desc: '2018-11-11'
				}, {
					title: '买家下单',
					desc: '2018-11-11'
				}, {
					title: '买家下单',
					desc: '2018-11-11'
				}],
			};
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			transRecords(handleDtos) {
				const that = this;
				let res = [];
				let flag = 0;
				for (let i = 0; i < handleDtos.length; i++) {
					let content, timestamp;
					let handleDto = handleDtos[i];
					timestamp = handleDto.handleTime;
					let deptSimpleName = handleDto.deptSimpleName || "";
					if (handleDto.handleStatus === 0) {
						content = "【" + handleDto.handlerName + " / " + deptSimpleName + "】新建了任务";
					} else if (handleDto.handleStatus === 1) {
						flag++;
						if (flag === 1) {
							content = "任务指派给【" + handleDto.handlerName + " / " + deptSimpleName + "】";
						} else {
							content = "任务转派给【" + handleDto.handlerName + " / " + deptSimpleName + "】";
						}
					} else if (handleDto.handleStatus === 2) {
						let desc;
						if (handleDto.type == 1) {
							taskUtils.transStagnantHandle(handleDto);
							desc = handleDto.handleWayLable || "";
						} else if (handleDto.type == 2) {
							taskUtils.transDangerHandle(handleDto);
							desc = handleDto.handleWayLable || "";
						} else if (handleDto.type == 3) {
							taskUtils.transPeopleHandle(handleDto);
							desc = handleDto.handleWayLable || "";
						} else if (handleDto.type == 4) {
							taskUtils.transMaterialsHandle(handleDto);
							desc = handleDto.handleWayLable || "";
						} else if (handleDto.type == 5) {
							desc = handleDto.floodTeamName || "";
						}

						desc = desc || "";
						content = "任务处置完成，执行人【" + handleDto.handlerName + " / " + deptSimpleName + "】" + "使用" + desc +
							"方式处置"; // 待补充处置完成说明
						if (handleDto.type == 4) {
							content = "任务处置完成，执行人【" + handleDto.handlerName + " / " + deptSimpleName + "】" + "调派" + desc +
								"仓库进行处置";
						}
						if (handleDto.type == 5) {
							content = "任务处置完成，执行人【" + handleDto.handlerName + " / " + deptSimpleName + "】" + "调派" + desc +
								"力量进行处置";
						}

					}
					if (handleDto.handleTime) {
						timestamp = handleDto.handleTime.substring(0, handleDto.handleTime.length - 1 - 2);
					}
					res.push({
						title: timestamp,
						desc: content
					})
				}

				// setTimeout(function() {
				// 	let eles = document.querySelectorAll("div.el-timeline-item__content");
				// 	let container = null;
				// 	for (let i = 0; i < eles.length; i++) {
				// 		let text = eles[i].innerText;
				// 		if (text.indexOf("任务处置完成") != -1) {
				// 			container = eles[i];
				// 			break;
				// 		}
				// 	}

				// 	//                handleDtos[handleDtos.length-1].urls = [
				// 	//                    "https://img0.baidu.com/it/u=3153405721,1524067674&fm=26&fmt=auto&gp=0.jpg",
				// 	//                    "https://v-cdn.zjol.com.cn/280443.mp4"
				// 	//                ]
				// 	if (container) {
				// 		container.appendChild(document.createElement("br"));
				// 		for (let k = 0; k < handleDtos.length; k++) {
				// 			let urls = handleDtos[k].urls;
				// 			if (Array.isArray(urls)) {
				// 				for (let j = 0; j < urls.length; j++) {
				// 					let url = urls[j];
				// 					let arr = url.split(".");
				// 					let type = arr[arr.length - 1];
				// 					if (that.checkImg(type)) {
				// 						let imgEle = document.createElement("img");
				// 						url = 'http://' + that.defaultPost + url;
				// 						imgEle.src = url;
				// 						imgEle.style.width = "60px";
				// 						imgEle.style.height = "40px";
				// 						container.appendChild(imgEle);
				// 						continue;
				// 					} else if (that.checkVideo(type)) {
				// 						let videoEle = document.createElement("video");
				// 						url = 'http://' + that.defaultPost + url;
				// 						videoEle.src = url;
				// 						videoEle.style.width = "60px";
				// 						videoEle.style.height = "40px";
				// 						container.appendChild(videoEle);
				// 						continue;
				// 					}
				// 				}
				// 			}
				// 		}
				// 		// 点击放大预览
				// 		container.addEventListener("click", function(event) {
				// 			let type = event.target.nodeName;
				// 			let ele;
				// 			that.previewShow = true;
				// 			// 异步previewImgVideo元素才加载
				// 			setTimeout(function() {
				// 				let previewImgVideoEle = document.querySelector(
				// 				"#previewImgVideo");
				// 				previewImgVideoEle.innerHTML = "";
				// 				switch (type) {
				// 					case "IMG":
				// 						ele = document.createElement("img");
				// 						ele.src = event.target.src;
				// 						previewImgVideoEle.appendChild(ele);
				// 						break;

				// 					case "VIDEO":
				// 						ele = document.createElement("video");
				// 						ele.src = event.target.src;
				// 						ele.controls = true;
				// 						previewImgVideoEle.appendChild(ele);
				// 						break;
				// 				}
				// 			}, 20)
				// 		})
				// 	}
				// }, 100)
				return res;
			},
		},
		mounted() {
			this.$api.reqApi.taskDetail({
				id: this.id
			}).then(res => {
				if (res.code == 200) {
					const that = this;
					let item = res.data.taskInfoVo;
					taskUtils.transType(item);
					if (res.data.taskInfoVo.type == 1) { //内涝积水
						taskUtils.transStagnantDepth(item);
						taskUtils.transStagnantImpact(item);
						taskUtils.transStagnantArea(item);
					} else if (res.data.taskInfoVo.type == 2) { //工程险情
						taskUtils.transDangerType(item);
						taskUtils.transDangerAera(item);;
					} else if (res.data.taskInfoVo.type == 3) { //人员转移
					} else if (res.data.taskInfoVo.type == 4) { //物资调度
						taskUtils.transMaterials(item);
					} else if (res.data.taskInfoVo.type == 5) { // 力量调度
					}
					that.taskDetail = item;
					that.taskHandleRecords = that.transRecords(res.data.handleDtos);

					// 页面详情中绑定图片视频
					// if (Array.isArray(res.data.taskInfoVo.urls)) {
					// 	if (that.taskDetail.type == 1 || that.taskDetail.type == 2) {
					// 		that.$nextTick(() => {
					// 			let container = document.getElementById("imgeVideosContainer");
					// 			for (let i = 0; i < res.data.taskInfoVo.urls.length; i++) {
					// 				let url = res.data.taskInfoVo.urls[i];
					// 				let arr = url.split(".");
					// 				let type = arr[arr.length - 1];
					// 				if (that.checkImg(type)) {
					// 					let imgEle = document.createElement("img");
					// 					url = 'http://' + that.defaultPost + url;
					// 					imgEle.src = url;
					// 					imgEle.style.width = "60px";
					// 					imgEle.style.height = "40px";
					// 					container.appendChild(imgEle);
					// 					continue;
					// 				} else if (that.checkVideo(type)) {
					// 					let videoEle = document.createElement("video");
					// 					url = 'http://' + that.defaultPost + url;
					// 					videoEle.src = url;
					// 					videoEle.style.width = "60px";
					// 					videoEle.style.height = "40px";
					// 					container.appendChild(videoEle);
					// 					continue;
					// 				}
					// 			}
					// 			// 点击放大预览
					// 			container.addEventListener("click", function(event) {
					// 				let type = event.target.nodeName;
					// 				let ele;
					// 				that.previewShow = true;
					// 				// 异步previewImgVideo元素才加载
					// 				setTimeout(function() {
					// 					let previewImgVideoEle = document.querySelector(
					// 						"#previewImgVideo");
					// 					previewImgVideoEle.innerHTML = "";
					// 					switch (type) {
					// 						case "IMG":
					// 							ele = document.createElement("img");
					// 							ele.src = event.target.src;
					// 							previewImgVideoEle.appendChild(ele);
					// 							break;

					// 						case "VIDEO":
					// 							ele = document.createElement("video");
					// 							ele.src = event.target.src;
					// 							ele.controls = true;
					// 							previewImgVideoEle.appendChild(ele);
					// 							break;
					// 					}
					// 				}, 20)
					// 			})
					// 		})
					// 	}
					// }
				}
			})
		}
	}
</script>

<style lang="scss" scoped>
	.con {
		padding: 20rpx;
		background-color: #fff;
		height: 100%;
	}

	.title {
		font-weight: bold;
		margin-bottom: 16rpx;

		&::before {
			content: "";
			display: inline-block;
			height: 40rpx;
			width: 2px;
			background-color: #007AFF;
			vertical-align: bottom;
			margin-right: 10rpx;
		}
	}

	.baseInfo {
		li {
			line-height: 56rpx;

			span {
				color: #999;
			}
		}
	}

	::v-deep .u-steps .u-steps__item--column .u-steps__item__line {
		height: 84%;
		top: 57%;
	}
    .imgList{
		margin-bottom: 30rpx;
	}
	#imgeVideosContainer {
		img {
			width: 120rpx;
			height: auto;
			margin-right: 20rpx;
		}
	}
</style>
